<template>
  <div class="content">
    <div class="title">
      <b></b>
      <p>设备分布</p>
    </div>
    <div id="chart1" class="chart1"></div>
    <div id="chart1_len">
      <el-scrollbar style="height: 190px">
        <div class="lenBox" v-for="(data, id) in datas" :key="id">
          <span>
            <p>{{ data.name }}</p>
            <p>{{ data.num }}/{{ sum }}</p>
          </span>
          <div class="diyLen">
            <div
              class="diyLen diyLen_inner"
              :style="'width:' + data.per + '%;background:' + data.bg"
            ></div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import * as Axios from "../api/myAxios";

export default {
  name: "Regional",
  data() {
    return {
      colors: ["#fbd522", "#4BDCFF", "#F26213", "#df1f20"],
      datas: [],
      sum: 0,
    };
  },
  created() {
    Axios.post().then((res) => {
      let data = res.data.parameter.list;
      for (let i in data) {
        this.datas.push({
          num: data[i].sensorList.length,
          name: data[i].monitorName,
          bg: this.colors[i],
          per: null,
        });
      }
      this.datas.forEach((value) => {
        this.sum += value.num;
      });
      this.datas.forEach((value) => {
        value.per = ((value.num / this.sum) * 100).toFixed(1);
      });
    });
  },
  mounted() {
    let fun = async () => {
      let myChart = this.$echarts.init(document.getElementById("chart1"));
      await Axios.post().then((res) => {
        let data = res.data.parameter.list;
        let arr = [];
        for (let i in data) {
          arr.push({
            value: data[i].sensorList.length,
            name: data[i].monitorName,
          });
        }
        let option = {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
          },
          series: [
            {
              name: "区域分布",
              type: "pie",
              color: this.colors,
              radius: ["40%", "30%"],
              center: ["20%", "45%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "14",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: arr,
              left: 15,
            },
          ],
        };
        myChart.clear();
        myChart.setOption(option);
      });
    };
    fun();
  },
};
</script>

<style lang="less" scoped>
#chart1_len {
  position: absolute;
  right: 5%;
  top: 20%;
  width: 180px;
  height: 190px;
}
#chart1_len .el-scrollbar /deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
.lenBox {
  width: 100%;
  height: 30%;
}
.lenBox span {
  width: 100%;
  height: 20px;
  display: block;
  box-sizing: border-box;
  padding: 0 5px 0 5px;
}
.lenBox p {
  font-size: 11px;
  color: white;
  margin-bottom: 5px;
  float: left;
}
.lenBox p:nth-last-of-type(1) {
  float: right;
}
.diyLen {
  width: 100%;
  height: 6px;
  background: whitesmoke;
  border-radius: 10px;
}
.diyLen_inner {
  background: tomato;
}
</style>